<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/green/easyui.css?t=34355">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/color.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/farm/bottom.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/farm/farm.css">
	<script type="text/javascript" src="<%=basePath%>ext/farm/utils.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/plugins/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/locale/easyui-lang-zh_CN.js"></script>
	
<style type="text/css">
</style>
</head>
<body class="bg">
	<div class="bottom">
		<div class="control-box">
			<div class="prev" onclick="scorllLeft()"><img src="images/left.png" alt="prev"></div>
			<div class="bigbox">
				<div class="switcher">
	
				</div>
			</div>
			<div class="next" onclick="scorllRight()"><img src="images/right.png" alt="next"></div>
		</div>
	</div>
	<script type="text/javascript">
		getRemoteData('<%=basePath%>/seedBag/getList', successful);
		function successful(list){
			let len = list.length;
			$(".switcher").css("width", (len)*150 + "px");
			console.log(len);
			for(let i = 0; i < len; i++){
				var seedId = list[i].seedId;
				var number = list[i].number;
				$(".switcher").append(
						'<div class="box">' + 
	    					'<div class="circle"><a>' + number + '</a></div>' +
	    					'<img src="<%=basePath%>/images/crops/' + seedId + '/5.png" />' +
	    				'</div>'
	    		);
			}
		}
		
		var offsets = 0;
		function scorllRight(){
			if($(".switcher").width() + offsets > 600){
				offsets -= 150;
				$(".switcher").css("margin-left", offsets + "px");
			}
		}

		function scorllLeft(){
			if(offsets < 0){
				offsets += 150;
				$(".switcher").css("margin-left", offsets + "px");
			}
		}
	</script>

</body>
</html>